<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>imooc</title>
    <!-- 引入样式表 -->
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <div class="container">
        <!-- logo -->
        <a href="index.html"><img src="./assets/images/logo.png" alt="logo" /></a>
        <!-- 导航条 -->
        <nav>
          <ul>
            <li><a class="home" href="index.html">HOME</a></li>
            <li><a class="course" href="#">Course</a></li>
            <li><a class="actual" href="#">Actual</a></li>
            <li><a class="plan" href="#">Plan</a></li>
            <li><a class="faq" href="#">FAQ</a></li>
            <li><a class="notes" href="#">Notes</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- 横幅图片 -->
    <section class="banner">
      <ul>
        <li class="active"><img src="./assets/images/banner/banner1.jpg" alt="" /></li>
        <li class="left"><img src="./assets/images/banner/banner3.jpg" alt="" /></li>
        <li class="right"><img src="./assets/images/banner/banner2.jpg" alt="" /></li>
      </ul>
    </section>
    <!-- 页面主体 -->
    <section class="main">
      <!-- 侧边栏 -->
      <aside>
        <h1>Recent <samp>Course</samp></h1>
        <dl>
          <dt>Hyper Text Markup Language</dt>
          <dd><img src="./assets/images/Course/05_05.png" alt="" /></dd>
          <dd>
            HTML is the standard markup language used to create web pages and its elements form the
            building blocks of all websites.
          </dd>
        </dl>
        <dl>
          <dt>Cascading Style Sheets</dt>
          <dd><img src="./assets/images/Course/06_04.png" alt="" /></dd>
          <dd>
            Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts,
            colors, spacing) to Web documents.
          </dd>
        </dl>
        <dl>
          <dt>JavaScript</dt>
          <dd><img src="./assets/images/Course/09_07.png" alt="" /></dd>
          <dd>
            JavaScript is a high-level, dynamic, untyped, and interpreted programming language.
          </dd>
        </dl>
        <dl>
          <dt>AngularJS</dt>
          <dd><img src="./assets/images/Course/02_09.png" alt="" /></dd>
          <dd>
            AngularJS is an open-source web application framework mainly maintained by Google and by
            a community of individuals and...
          </dd>
        </dl>
      </aside>
      <!-- 内容 -->
      <article>
        <h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
        <p>We provide the latest knowledge to help you cope with the changing world!</p>
        <img src="./assets/images/article.jpg" />
        <p>
          We hope that all the students who love the Internet can be more convenient access to
          learning resources, using the Internet thinking to change our learning.
        </p>
        <p>
          Focus on IT skills education MOOC, consistent with the development trend of the Internet
          down to earth's MOOC. We are free, we only teach useful, we concentrate on education.
        </p>
      </article>
    </section>
    <!-- 底部 -->
    <footer>
      <div class="container">
        <p>Copyright © 2021 imooc.com All Rights Reserved.</p>
        <span>
          <img src="./assets/images/icon/weichat.png" alt="" />
          <img src="./assets/images/icon/sina.png" alt="" />
          <img src="./assets/images/icon/qq.png" alt="" />
        </span>
      </div>
    </footer>
  </body>
</html>
